<template>
  <div class="transfer-box">
    <CloudTransferList
      height="300"
      v-cloudLoading="{ show: transferLoading }"
      :showSelectAll="false"
      placeholder="请输入姓名搜索"
      :isCustomTransfer="true"
      :sourceList="sourceList"
      :targetList="targetList"
      @change="handleChange"
      @search="handleSearch"
      @selectChange="selectChange"
    >
    </CloudTransferList>
    <div style="margin-top: 10px">
      <CloudTransferList
        height="300"
        v-cloudLoading="{ show: transferLoading }"
        :showSelectAll="false"
        placeholder="请输入姓名搜索"
        :isCustomTransfer="true"
        :sourceList="sourceList1"
        :targetList="targetList1"
        @change="handleChange"
        @search="handleSearch"
        @selectChange="selectChange"
      >
      </CloudTransferList>
    </div>
  </div>
</template>

<script>
import reqwest from 'reqwest';
export default {
  title: '7.自定义穿梭框多选(isCustomTransfer=true)',
  subTitle: '自定义穿梭框多选',
  data() {
    return {
      transferLoading: false,
      sourceList: [],
      targetList: [],
      sourceList1: [],
      targetList1: []
    }
  },
  methods: {
    handleChange(targetKeys, direction, moveKeys) {
      console.log(targetKeys, direction, moveKeys);
    },

    selectChange(sourceSelectedKeys, targetSelectedKeys) {
      console.log(sourceSelectedKeys, targetSelectedKeys);
    },

    listChange(val) {
      console.log('val', val)
    },

    handleSearch(value, event) {
      console.log('search:', value, event);
    },

    getData() {
      reqwest({
        url: 'http://172.31.15.10:53000/mock/95/designSpace/space/invite/queryMembers',
        method: 'get',
        processData: false,
        success: (res) => {
          this.transferLoading = false
          this.sourceList = res.data
          console.log('this.sourceList 000', this.sourceList)
        },
      });
    },

    getData1() {
      this.transferLoading = true
      reqwest({
        url: 'http://172.31.15.10:53000/mock/95/designSpace/space/invite/queryMembers',
        method: 'get',
        processData: false,
        success: (res) => {
          this.transferLoading = false
          this.sourceList1 = res.data.map(item => {
            return {
              ...item,
              disabled: false
            }
          })
          console.log('this.sourceList1 111', this.sourceList1)
        },
      });
    }
  },
  mounted() {
    this.getData()
    this.getData1()
  }
}
</script>

<style lang="scss">
.transfer-box {
  width: 660px;
  height: 380px;
  padding: 20px;
}
</style>